<template>
    <!-- 登录用户管理 -->
    <c-list-template :operation="true" title="登录用户">
        <template slot="search">
            <el-row :gutter="5">
                <el-col :span="6" class="flex-center ">
                    <div class="mr-lg">ID</div>
                    <el-input v-model="userId" :placeholder="$t('management.inputId')" class="wh flex-1 mr-lg" />
                </el-col>
                <el-col :span="18" class="flex-x-end">
                    <el-button icon="el-icon-search" type="primary" @click="handleSearch()">搜索</el-button>
                    <el-button icon="el-icon-delete" @click="handleReset">重置</el-button>
                </el-col>
            </el-row>
        </template>

        <template slot="operation">
            <el-button icon="el-icon-plus" type="primary" @click="handleAdd">新增</el-button>
        </template>

        <template slot="list">
            <el-table :loading="loading" :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="tableData" class="elTables">
                <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
                <el-table-column align="center" prop="id" label="ID" width="100"></el-table-column>
                <el-table-column align="center" prop="username" :label="$t('management.userName')" width="100"></el-table-column>
                <el-table-column align="center" :label="$t('management.accountStatus')" width="130">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status === 1">{{ $t("management.normal") }}</span>
                        <span v-if="scope.row.status === 9">
                            {{ $t("management.suspended") }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="company" :label="$t('management.institution')"></el-table-column>
                <el-table-column align="center" prop="department" :label="$t('management.department')"></el-table-column>
                <el-table-column align="center" prop="timeCreate" :label="$t('management.timeOfCreation')">
                    <template slot-scope="scope">
                        <span>{{ scope.row.timeCreate | dateYMDHMSFormat }}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" align="center" :label="$t('management.operation')">
                    <template slot-scope="scope">
                        <i class="el-icon-refresh operate-icon" @click="initPassword(scope.row.id)" :title="$t('management.initializePassword')"></i>
                        <i v-if="scope.row.id!=='system'" class="el-icon-delete operate-icon" @click="clickDelete(scope.row.id)" :title="$t('management.deleteAccount')"></i>
                        <i class="el-icon-user operate-icon" @click="changeRole(scope.row)" :title="$t('management.userRoleAuthorization')"></i>

                        <i class="el-icon-lock operate-icon" :title="
                scope.row.status === 1
                  ? $t('management.suspendUserAccount')
                  : $t('management.unbanUserAccount')
              " @click="toggleStatus(scope.row)"></i>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <template slot="pagination">
            <el-pagination background :total="total" layout="total, sizes, prev, pager, next, jumper" :page-size="pageParams.size" @current-change="getList" :current-page.sync="pageParams.current">
            </el-pagination>
        </template>

        <c-role-auth ref="cRoleAuth" />
        <c-user-form ref="cUserForm" />
    </c-list-template>
</template>

<script>
import cRoleAuth from "./components/c-role-auth.vue";
import cUserForm from "./components/c-user-form.vue";
export default {
    components: {
        cRoleAuth,
        cUserForm
    },
    data () {
        return {
            userId: "",
            tableData: [],
            total: 0,
            pageParams: {
                current: 1,
                size: 10
            },
            loading: false
        };
    },
    mounted () {
        this.getList();
    },
    methods: {
        handleAdd () {
            this.$refs.cUserForm.handleOpen();
        },
        handleReset () {
            this.pageParams = {
                current: 1,
                size: 10
            };
            this.userId = ""
            this.getList();
        },
        handleSearch () {
            this.pageParams.current = 1;
            this.getList();
        },
        getList () {
            this.loading = true;
            this.$post({
                url: "/user/list",
                params: {
                    ...this.pageParams,
                    userId: this.userId
                }
            }).then(res => {
                this.tableData = res.records;
                this.total = res.total;
                this.loading = false;
            });
        },
        initPassword (val) {
            this.$mixin.methods.showConfirm(this.$t("management.resetWarn"), () => {
                this.resetPassword(val);
            });
        },
        resetPassword (id) {
            this.$post({
                url: "/user/pwd/init",
                params: {
                    uid: id
                }
            }).then(res => {
                this.$message({
                    type: "success",
                    message: this.$t("global.success")
                });
            });
        },
        clickDelete (val) {
            this.$mixin.methods.showConfirm(this.$t("role.deleteRoleMess"), () => {
                this.deleteUser(val);
            });
        },
        deleteUser (val) {
            this.$ajax({
                method: "delete",
                url: "/user/" + val
            }).then(res => {
                if (res.data.success) {
                    this.$message({
                        type: "success",
                        message: this.$t("global.success")
                    });
                    this.getList();
                } else {
                    this.$message({
                        type: "warning",
                        message: this.$t("global.deleteFail")
                    });
                }
            });
        },
        toggleStatus (item) {
            let url, msg;
            if (item.status === 1) {
                url = "/user/disable";
                msg = this.$t("management.suspendWarn");
            } else {
                url = "/user/usable";
                msg = this.$t("management.unbanWarn");
            }
            this.$mixin.methods.showConfirm(msg, () => {
                this.comfirmStatus(url, item);
            });
        },
        comfirmStatus (url, item) {
            this.$get({
                method: "get",
                url: url,
                params: {
                    uid: item.id
                }
            }).then(res => {
                this.$message({
                    message: this.$t("management.operateSuccessfully"),
                    type: "success"
                });
                this.getList();
            });
        },
        changeRole (item) {
            this.$refs.cRoleAuth.show = true;
            this.$refs.cRoleAuth.getRoleList(item);
        }
    }
};
</script>
<style scoped lang="scss">
.el-input {
    display: inline-block;
    width: 200px;
}
.operate-icon {
    margin-right: 4px;
    font-size: 18px;
    color: #2d82ef;
    cursor: pointer;
}
</style>
